<template>

  <view style="background-color: #000;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 1000;">
    <!--  cssanimation  ca__fx-clipVerticalSplitIn-->
    <view class="content  cssanimation  ca__fx-clipVerticalSplitIn"
      style="animation-duration: 2s;animation-delay: 0.2s;">
      <!--  <div class="top_left_logo  cssanimation ca__fx-fadeInLeft" style="animation-delay: 1.5s;">
        <img src="@/static/leftLogo.png" alt="">
      </div>
      <div class="top_right_logo cssanimation ca__fx-fadeInRight" style="animation-delay: 1.5s;">
        <img src="@/static/rightLogo.png" alt="">
      </div> -->
      <div class="top_logo">
        <img src="@/static/images/P1_2.png" alt="">
      </div>

      <div v-if="step == 1" class="step_1_container">
        <div>
          <img class="step_1_main_logo cssanimation ca__fx-fadeInTop" style="animation-delay: 1.5s;"
            src="@/static/images/P1_4.png" alt="">
          <img class="step_1_sub_logo cssanimation ca__fx-fadeIn" style="animation-delay: 2s;"
            src="@/static/images/P1_6.png" alt="">
        </div>
        <div>
          <img class="step_1_icon" ref="step1Icon" style="opacity: 0; visibility: hidden;" src="@/static/h5_img/图标.png"
            alt="" @click="step = 2;createMusic(); ">
          <!--  -->
        </div>
      </div>

      <div v-if="step == 2" class="step_2_container">
        <div class="step_2_text">
          <p class="cssanimation ca__fx-clipDiagonalSliceIn" style="animation-duration: 1.5s;">亲爱的青熙蘭庭北园业主:
          </p>
          <p class="cssanimation ca__fx-mask-wipeInTop" style="animation-delay: 0.5s;text-indent: 2em;">
            见字如晤，展信安好。</p>
          <p class="cssanimation ca__fx-mask-wipeInTop" style="animation-delay: 1s;text-indent: 2em;">
            金秋执笔美好，心归理想家境。历经四时轮转，曾经在蓝图上的线条，终在秋色中完全化为可触摸的实境。家园如约境成，此刻推门即见丰盈。</p>
          <p class="cssanimation ca__fx-mask-wipeInTop"
            style="animation-duration: 1.5s;animation-delay: 1.5s;text-indent: 2em;">
            感谢您的信任与支持，目前【城投置地·青熙蘭庭北园】(备案名:青熙兰园)已竣工，具备交房条件。</p>
          <p class="cssanimation ca__fx-mask-wipeInTop"
            style="animation-duration: 1.5s;animation-delay: 2.3s;text-indent: 2em;">
            现邀您于2025年10月22日至10月25日,前往城投置地·青熙蘭庭北园小区主入口进行验房交付。</p>
        </div>
        <img class="step_2_icon" ref="step2Icon" style="opacity: 0; visibility: hidden;" src="@/static/h5_img/图标.png"
          alt="" @click="step = 3">
      </div>

      <div v-if="step == 3" class="step_3_container">
        <div class="step_3_text_1 step_3_text_item cssanimation ca__fx-moonFadeScaleUp"
          style="animation-duration: 0.5s;">
          <!--  <div class="step_3_text_content"
            style="text-align: left !important;padding-left: 40rpx;display: flex;align-items: center;">
            <span style="margin-right: 20rpx;font-weight: bold;">交付日期</span>
            <span style="margin-right: 20rpx;">▶</span>
            <span style="color: #fff;">2025年10月22日—10月25日</span>

          </div> -->
          <div class="step_3_text_content" style="text-align: left;">
            <img src="@/static/images/P3_4.png" alt="" srcset="" style="width: 80%"></img>
          </div>
        </div>
        <div class="step_3_text_2 step_3_text_item cssanimation ca__fx-moonFadeScaleUp"
          style="animation-duration: 0.5s; animation-delay: 0.3s;">
          <!--  <div class="step_3_text_content"
            style="text-align: left !important;padding-left: 40rpx;display: flex;align-items: center;">
            <span style="margin-right: 20rpx;font-weight: bold;">交付地点</span>
            <span style="margin-right: 20rpx;">▶</span>
            <span style="color: #fff;">青熙蘭庭北园小区主入口</span>

          </div> -->
          <div class="step_3_text_content" style="text-align: left;">
            <img src="@/static/images/P3_5.png" alt="" srcset="" style="width: 80%"></img>
          </div>
        </div>
        <div class="step_3_text_3 step_3_text_item cssanimation ca__fx-moonFadeScaleUp"
          style="animation-duration: 0.5s; animation-delay: 0.3s;">
          <!--  <div class="step_3_text_content"
            style="text-align: left !important;padding-left: 40rpx;display: flex;align-items: center;">
            <span style="margin-right: 20rpx;font-weight: bold;">交付对象</span>
            <span style="margin-right: 20rpx;">▶</span>
            <span style="color: #fff;">所有楼栋款清业主</span>


          </div> -->
          <div class="step_3_text_content" style="text-align: left;">
            <img src="@/static/images/P3_6.png" alt="" srcset="" style="width: 80%"></img>
          </div>
        </div>
        <div class="step_3_text_4 step_3_text_item cssanimation ca__fx-moonFadeScaleUp"
          style="animation-duration: 0.5s; animation-delay: 0.5s;">

          <div class="step_3_text_content" style="display: flex;align-items: center;">
            <img src="@/static/images/P3_9.png" alt="" srcset="" style="width: 100%"></img>
          </div>
        </div>
        <div class="step_3_text_5 step_3_text_item cssanimation ca__fx-moonFadeScaleUp"
          style="animation-duration: 0.5s; animation-delay: 0.7s;">

          <div class="step_3_text_content" style="text-align: left;">
            <img src="@/static/images/P3_7.png" alt="" srcset="" style="width: 75%"></img>

          </div>
        </div>
        <div class="step_3_text_6 step_3_text_item cssanimation  ca__fx-moonFadeScaleUp"
          style="animation-duration: 0.5s; animation-delay: 0.9s;">

          <div class="step_3_text_content" style="font-size: 20rpx;">
            <img src="@/static/images/P3_8.png" alt="" srcset="" style="width: 100%"></img>

          </div>
        </div>

        <img class="step_3_icon" ref="step3Icon" style="opacity: 0; visibility: hidden;" src="@/static/h5_img/图标.png"
          alt="" @click="step = 4">
      </div>

      <div v-if="step == 4" class="step_4_container">
        <div>
          <img class="step_4_title cssanimation ca__fx-moonFadeScaleUp" style="animation-duration: 0.8s;"
            src="@/static/images/P4_4.png" alt="" srcset="">
          <div class="input_box_container">
            <div class="input_box cssanimation ca__fx-moveFromRight"
              style="animation-duration: 0.8s; animation-delay: 0.5s;">

              <div class="input_box_item_title">
                <p style="color: #333;font-weight: bold;">业主姓名:</p>
              </div>
              <div class="input_box_item_input">
                <input v-model="form.userName" type="text" placeholder="" :adjust-position="false">
              </div>

            </div>
            <div class="input_box cssanimation ca__fx-moveFromRight"
              style="animation-duration: 0.8s; animation-delay: 0.6s;">

              <div class="input_box_item_title">
                <p style="color: #333;font-weight: bold;">业主房号:</p>
              </div>
              <div class="input_box_item_input">
                <!--    <input v-model="form.room" type="text" placeholder="" :adjust-position="false">  @change="onchange"-->
                <view v-if="form.userHouseNo" @click="showPicker"
                  style="width: 280rpx;height: 42rpx;line-height: 45rpx;">
                  {{ form.userHouseNo}}</view>
                <view v-else style="width: 280rpx;height: 42rpx;line-height: 45rpx; color: #808080;"
                  @click="showPicker">

                </view>
              </div>
            </div>

            <div class="input_box cssanimation ca__fx-moveFromRight"
              style="animation-duration: 0.8s; animation-delay: 0.7s;">

              <div class="input_box_item_title">
                <p style="color: #333;font-weight: bold;">身份证号:</p>
              </div>
              <div class="input_box_item_input">
                <input v-model="form.userIdNo" type="text" placeholder="" :adjust-position="false">
              </div>
            </div>

            <div class="input_box cssanimation ca__fx-moveFromRight"
              style="animation-duration: 0.8s; animation-delay: 0.7s;">

              <div class="input_box_item_title">
                <p style="color: #333;font-weight: bold;">预计到访人数:</p>
              </div>
              <div class="input_box_item_input">
                <input v-model="form.visitNum" type="text" placeholder="" :adjust-position="false">
              </div>
            </div>

            <img class="step_4_remark" src="@/static/images/P4_8.png" alt="">
          </div>

        </div>

        <img class="step_4_icon  ca__fx-" src="@/static/h5_img/图标(提交).png" alt="" @click="nextStep">
      </div>

      <div v-if="step == 5" class="step_5_container">
        <div>
          <img class="step_5_title cssanimation ca__fx-moonFadeScaleUp" style="animation-duration: 0.8s;"
            src="@/static/images/P4_4.png" alt="" srcset="">
          <div class="input_box_container">
            <div class="input_box cssanimation ca__fx-moveFromRight"
              style="animation-duration: 0.8s; animation-delay: 0.5s;">

              <div class="input_box_item_title">
                <p style="color: #333;font-weight: bold;">预约日期:</p>
              </div>
              <div class="input_box_item_input">
                <!--  <view style="width: 280rpx;height: 42rpx;line-height: 45rpx; color: #808080;">
                  {{ formatDate(form.orderDate) }}</view> -->
                <view v-if="form.orderDate" @click="showDate"
                  style="width: 280rpx;height: 42rpx;line-height: 45rpx; color: #4D4D4D;">{{
                  formatDate(form.orderDate) }}</view>
                <view v-else style="width: 280rpx;height: 42rpx;line-height: 45rpx;" @click="showDate">
                </view>
              </div>

            </div>
            <div class="input_box cssanimation ca__fx-moveFromRight"
              style="animation-duration: 0.8s; animation-delay: 0.6s;">

              <div class="input_box_item_title">
                <p style="color: #333;font-weight: bold;">预约时段:</p>
              </div>
              <div class="input_box_item_input">
                <view v-if="form.orderTime" @click="showPopup(form.orderTime)"
                  style="width: 280rpx;height: 42rpx;line-height: 45rpx; color: #4D4D4D;">
                  {{form.orderTime }}</view>
                <view v-else style="width: 280rpx;height: 42rpx;line-height: 45rpx; color: #4D4D4D;" @click="showPopup">
                </view>
              </div>
            </div>
          </div>

        </div>

        <img class="step_5_icon" src="@/static/h5_img/图标(提交).png" alt="" @click="submitForm">
      </div>

      <div v-if="step == 6" class="step_6_container ">
        <div class="step_6_title cssanimation ca__fx-moonFadeScaleUp"
          style="animation-duration: 0.8s;animation-delay: 0.5s;">
          <!--  <p style="font-size: 40rpx;color: #bd9d6e;">恭喜您预约成功</p> -->
          <img src="@/static/images/P6_3.png" style="
    width: 38%;" alt="" srcset="">
        </div>
        <div class="step_6_content cssanimation ca__fx-mask-wipeInTop"
          style="animation-duration: 1s;animation-delay: 1s;">
          <p>尊敬的 {{ form.userName }} ({{ form.userHouseNo }}) 业主家人</p>
          <p>您已成功预约</p>
          <p>请于预约时间前往青熙蘭庭北园交房现场办理相关交付事宜</p>
          <p>可截图保存此页面凭证便于现场快速核对</p>
          <p>如有疑问，请致电028-8027 6699</p>
        </div>
        <div class="step_6_icon">
          <img src="@/static/h5_img/图六/图标1.png" alt="" @click="cancelSave">
          <img src="@/static/h5_img/图六/图标2.png" alt="" @click="retrySave">
        </div>
      </div>


    </view>
    <DateTimePicker ref="DateTimePickerRef" startYear="2025" endYear="2025" startMonth="10" endMonth="10" startDay="22"
      endDay="25" v-model="form.orderDate" mode="date" title="选择时间" @confirm="handleDateConfirm">
    </DateTimePicker>
    <!--  <DateTimePicker ref="DateTimePickerRef2" v-model="form.orderTime" mode="time" title="选择时间"
      @confirm="handleTimeConfirm">
    </DateTimePicker> -->
    <uni-data-picker :localdata="dataTree" v-model="form.userHouseNo" ref="roomPicker" @change="handleRoomChange">
    </uni-data-picker>

    <uni-popup ref="popup" background-color="#fff" type="bottom" :is-mask-click="false"
      borderRadius="20px 20px 0px 0px">
      <div class="popup_container">
        <div style="text-align: center;padding: 20rpx; display: flex; justify-content: space-between;">
          <span @click="handleCancelTime">取消</span>
          <span>请选择预约时间段</span>
          <span style="color: #bd9d6e;" @click="handleConfirmTime">确定</span>
        </div>


        <div class="time_container">
          <div class="time_item" :class="{ 
              'disabled': item.disabled, 
              'selected': item.selected 
            }" v-for="item in timeArr" :key="item.value" @click="selectTime(item)">{{ item.label }}</div>
        </div>
      </div>
    </uni-popup>

    <uni-popup ref="toast" background-color="#fff" type="center" :is-mask-click="false"
      borderRadius="10px 10px 10px 10px">
      <div class="toast_container">
        <uni-icons type="checkbox" size="80" color="#19be6b" v-if="errMsg == '您已取消预约'"></uni-icons>
        <uni-icons type="close" size="80" color="#fa3534" v-else></uni-icons>
        <div class="toast_content" style="font-size: 30rpx;">{{ errMsg }}</div>
        <div class="toast_btn" @click="hideToast">确定</div>
      </div>
    </uni-popup>
    <div class="music_container rotation" ref="musicContainer" @click="toggleMusic">
      <img src="@/static/音乐.png" alt="" srcset="">
    </div>

  </view>

</template>
<script setup>
import { buildList, cancelOrder, checkUser, getTimeList, saveOrder } from '@/api/login.js';
import music from '@/static/music.mp3';
import dayjs from 'dayjs';
import { onMounted, reactive, ref, watch } from 'vue';
import DateTimePicker from '../components/datetimePicker.vue';
/* import dataTree from './dataTree.json'; */
const form = reactive({
  userName: '',
  userHouseNo: '',
  userIdNo: '',
  orderDate: '',
  orderTime: '',
  visitNum: '',
});
const dataTree = ref([])
const DateTimePickerRef = ref(null);
const DateTimePickerRef2 = ref(null);
const step = ref(1)
const step1Icon = ref(null);
const step2Icon = ref(null);
const step3Icon = ref(null);
const musicContainer = ref(null);
const roomPicker = ref(null);
const popup = ref(null);
const toast = ref(null);
const timeArr = ref([
  { label: '9:00-10:00', value: '9:00-10:00', disabled: false, selected: false },
  { label: '10:00-11:00', value: '10:00-11:00', disabled: false, selected: false },
  { label: '11:00-12:00', value: '11:00-12:00', disabled: false, selected: false },
  { label: '13:00-14:00', value: '13:00-14:00', disabled: false, selected: false },
  { label: '14:00-15:00', value: '14:00-15:00', disabled: false, selected: false },
  { label: '15:00-16:00', value: '15:00-16:00', disabled: false, selected: false },
  { label: '16:00-17:00', value: '16:00-17:00', disabled: false, selected: false },
])

const errMsg = ref('');


// 控制step1图标的连续动画
const startStep1IconAnimation = () => {
  if (step1Icon.value) {
    // 先让按钮显示出来
    step1Icon.value.style.opacity = '1';
    step1Icon.value.style.visibility = 'visible';

    // 先执行moonFade动画
    step1Icon.value.classList.add('cssanimation', 'ca__fx-moonFade');

    // 1秒后移除moonFade，开始执行elasticPulse（持续执行）
    setTimeout(() => {
      step1Icon.value.classList.remove('ca__fx-moonFade');
      step1Icon.value.classList.add('ca__fx-elasticPulse');
      // 设置elasticPulse持续执行
      step1Icon.value.style.animationIterationCount = 'infinite';
    }, 1000);
  }
};

// 控制step2图标的连续动画
const startStep2IconAnimation = () => {
  if (step2Icon.value) {
    // 先让按钮显示出来
    step2Icon.value.style.opacity = '1';
    step2Icon.value.style.visibility = 'visible';

    // 先执行moonFade动画
    step2Icon.value.classList.add('cssanimation', 'ca__fx-moonFade');

    // 1秒后移除moonFade，开始执行elasticPulse（持续执行）
    setTimeout(() => {
      step2Icon.value.classList.remove('ca__fx-moonFade');
      step2Icon.value.classList.add('ca__fx-elasticPulse');
      // 设置elasticPulse持续执行
      step2Icon.value.style.animationIterationCount = 'infinite';
    }, 1000);
  }
};

// 控制step3图标的连续动画
const startStep3IconAnimation = () => {
  if (step3Icon.value) {
    // 先让按钮显示出来
    step3Icon.value.style.opacity = '1';
    step3Icon.value.style.visibility = 'visible';

    // 先执行moonFade动画
    step3Icon.value.classList.add('cssanimation', 'ca__fx-moonFade');

    // 1秒后移除moonFade，开始执行elasticPulse（持续执行）
    setTimeout(() => {
      step3Icon.value.classList.remove('ca__fx-moonFade');
      step3Icon.value.classList.add('ca__fx-elasticPulse');
      // 设置elasticPulse持续执行
      step3Icon.value.style.animationIterationCount = 'infinite';
    }, 1000);
  }
};
// 页面加载完成后启动动画
onMounted(() => {

  getBuilding();

  /*   popup.value.open(); */
  // 延迟2秒后开始step1图标的动画
  setTimeout(() => {
    startStep1IconAnimation();
  }, 2000);




});

// 监听step变化，当切换到step2时开始动画
watch(step, (newStep) => {
  if (newStep == 1) {
    setTimeout(() => {
      startStep1IconAnimation();
    }, 2000);
  }
  if (newStep === 2) {
    // 延迟一点时间确保DOM渲染完成
    setTimeout(() => {
      startStep2IconAnimation();
    }, 3500);
  }
  if (newStep === 3) {
    // 延迟一点时间确保DOM渲染完成
    setTimeout(() => {
      startStep3IconAnimation();
    }, 1000);
  }



});





/* 获取楼栋 */
const getBuilding = () => {
  buildList().then((res) => {
    dataTree.value = res.data.children
  }).catch((err) => {

  });
}


/* 音乐播放start */
const innerAudioContext = ref(null);
const createMusic = () => {
  innerAudioContext.value = uni.createInnerAudioContext();
  innerAudioContext.value.autoplay = true;
  innerAudioContext.value.loop = true;
  innerAudioContext.value.src = music
  innerAudioContext.value.play();
}

const toggleMusic = () => {
  console.log(musicContainer.value);

  if (innerAudioContext.value.paused) {
    innerAudioContext.value.play();
    // 设置音乐图标旋转
    musicContainer.value.classList.add('rotation');

  } else {
    musicContainer.value.classList.remove('rotation');
    innerAudioContext.value.pause();
  }
}
/* 音乐播放end */

/* 日期选择start */
const showDate = () => {
  DateTimePickerRef.value.show();
}
const handleDateConfirm = ({ value, formatted }) => {
  console.log(value);
  form.orderDate = dayjs(value).format('YYYY-MM-DD');

  getTimeList({ orderDate: dayjs(value).format('YYYY-MM-DD') }).then((res) => {
    let arr = res.data.orderDateList[0].dateOrders;

    timeArr.value.forEach(item => {
      let obj = arr.find(item2 => item2.orderTime == item.value);
      if (obj) {
        item.disabled = obj.leftCount == 0;
      }
    })
  }).catch((err) => {

  });


}
const formatDate = (date) => {
  return dayjs(date).format('YYYY年MM月DD日');
}
/* 日期选择end */

/* 时间段选择start */
const showPopup = (time) => {
  popup.value.open();
  if (time) {
    timeArr.value.forEach(item => {
      item.selected = false;
      if (item.value === time) {
        item.selected = true;
      }
    });
  }
}

const selectTime = (value) => {

  if (value.disabled) return;
  const isCurrentlySelected = value.selected;
  timeArr.value.forEach(item => {
    item.selected = false;
  });
  if (!isCurrentlySelected) {
    value.selected = true;
    form.orderTime = value.value;
  } else {
    form.orderTime = '';
  }

  console.log('选中的值:', form.orderTime);
}

const handleConfirmTime = () => {
  /* if (!form.time) {
    showToast('请选择时间段');
    return
  } */
  popup.value.close();
}
const handleCancelTime = () => {

  popup.value.close();

}


/* 时间段选择end */

/* 房号选择start */
const showPicker = () => {
  roomPicker.value.show();
}
const handleRoomChange = (e) => {
  console.log(e);
  // 为啥页面没显示呢？
  form.userHouseNo = e.detail.value[2].value;
  /*  form.userHouseNo = e.detail.value[2].value; */
  console.log(form);

}
/* 房号选择end */





/* toast start */
const showToast = (msg) => {
  toast.value.open()
  errMsg.value = msg;
}
const hideToast = () => {
  toast.value.close()
  errMsg.value = '';

  if (step.value == 6) {
    step.value = 1
    form.userName = ''
    form.userHouseNo = ''
    form.userIdNo = ''
    form.orderDate = ''
    form.orderTime = ''
    form.visitNum = ''
    // 如果有其他属性也需要清空
    if (form.orderId) {
      form.orderId = ''
    }
  }

}





const nextStep = () => {

  if (!form.userName) {
    showToast('请填写业主姓名');
    return;
  }
  if (!form.userHouseNo) {
    showToast('请选择业主房号');
    return;
  }
  if (!form.userIdNo) {
    showToast('请填写身份证号');
    return;
  }
  if (!form.visitNum) {
    showToast('请填写预计到访人数');
    return;
  }

  /*  form.userHouseNo = '50-1-1502'; */
  checkUser(form).then((res) => {
    /* step.value = 5; */
    if (res.code == 200 && !res.data) {
      step.value = 5;
    } else {
      form.orderId = res.data.orderId;
      form.orderDate = res.data.orderDate;
      form.orderTime = res.data.orderTime;
      step.value = 6;
      console.log(form, 'form');
    }


  }).catch((err) => {
    showToast(err);
    console.log(err, 'err');
  });




}

/* 预约 */
const submitForm = () => {
  if (!form.orderDate) {
    showToast('请选择预约日期');
    return;
  }
  if (!form.orderTime) {
    showToast('请选择预约时段');
    return;
  }
  saveOrder(form).then((res) => {
    if (res.code == 200) {
      form.orderId = res.data
      step.value = 6;
    }
  }).catch((err) => {
    showToast(err)
  });

}

/* 取消预约 */
const cancelSave = () => {
  cancelOrder({ orderId: form.orderId }).then((res) => {
    showToast('您已取消预约')

  }).catch((err) => {
    showToast(err)
  });

}

/*  重新预约 */
const retrySave = () => {
  step.value = 5
}

</script>


<style scoped lang="scss">
.content {
  background-color: #000;
  width: 100%;
  min-height: 100dvh;
  background-image: url('@/static/images/P1_1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  padding-top: 80rpx;

  .top_logo {

    width: 90%;
    height: auto;
    margin: 0 auto;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .top_left_logo {
    position: fixed;
    top: 60rpx;
    left: 50rpx;
    width: 250rpx;
    height: 25rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .top_right_logo {
    position: fixed;
    top: 60rpx;
    right: 50rpx;
    width: 120rpx;
    height: 65rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    img {
      width: 100%;
      height: 100%;
    }
  }
}







/* Step 1 样式 */
.step_1_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  min-height: calc(100dvh - 120rpx);
  padding: 0 10%;

  >div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .step_1_main_logo {
    width: 80%;
    margin-bottom: 150rpx;
  }

  .step_1_sub_logo {
    width: 60%;

  }

  .step_1_icon {

    height: 50rpx;
  }
}


/* Step 2 样式 */
.step_2_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  min-height: calc(100dvh - 120rpx);
  padding: 0 10%;

  .step_2_text {
    color: #d8d7d7;
    width: 100%;
    font-size: 32rpx;
    line-height: 1.8;
    text-align: left;
    margin-left: 40rpx;
  }

  .step_2_icon {
    height: 50rpx;
    margin-bottom: 150rpx;
  }
}





/* Step 3 样式 */
.step_3_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10%;
  min-height: calc(100dvh - 120rpx);

  .step_3_icon {
    height: 50rpx;
    margin-top: 60rpx;
  }

  .step_3_text_item {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  .step_3_text_1 {
    padding-top: 20rpx;
    color: #bd9d6e;
  }

  .step_3_text_2 {
    margin-top: 20rpx;
    color: #bd9d6e;

  }

  .step_3_text_3 {
    margin-top: 20rpx;
    color: #bd9d6e;

  }

  .step_3_text_4 {
    margin-top: 30rpx;

  }

  .step_3_text_5 {
    margin-top: 40rpx;

  }

  .step_3_text_6 {
    margin-top: 40rpx;
    text-align: left !important;
  }

  .step_3_text_title {
    font-size: 36rpx;
    color: #bd9d6e;
  }

  .step_3_text_content {
    font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
    color: #F0D9BD;
    font-size: 26rpx;
    margin-top: 15rpx;

  }

  .step_3_text_1_img {
    width: 100%;

  }

  .step_3_text_2_img {
    width: 100%;

  }


}





/* Step 4 样式 */
.step_4_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 0 10%;
  min-height: calc(100dvh - 120rpx);

  >div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .step_4_title {
    margin-top: 120rpx;
    width: 38%;
    margin-bottom: 40rpx;
  }

  .step_4_icon {
    height: 50rpx;
    margin-bottom: 180rpx;
    animation: moveFromBottom 1.5s ease-in-out;
  }

  .input_box_container {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 60rpx;
  }

  .input_box {
    display: flex;
    align-items: center;
    color: #4D4D4D;
    border: 1px solid #F0D9BD;
    background-color: #F0D9BD;
    padding: 20rpx 30rpx;
    border-radius: 100rpx;
    gap: 20rpx;


  }

  .input_box_item_title {
    white-space: nowrap;
  }

  .step_4_remark {
    width: 100%;
    // 延迟0.6s后执行动画  平滑过渡 动画时间0.8s

    animation: moveFromBottom 1.5s ease-in-out;


  }
}


:deep(.uni-input-input::placeholder) {
  color: rgb(231, 25, 25);
}

@keyframes moveFromBottom {
  from {
    transform: translateY(300px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/* Step 5 样式 */
.step_5_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 0 10%;
  min-height: calc(100dvh - 120rpx);

  >div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .step_5_title {
    margin-top: 120rpx;
    width: 38%;
    margin-bottom: 40rpx;
  }

  .step_5_icon {
    height: 50rpx;
    margin-bottom: 100rpx;
    animation: moveFromBottom 1.5s ease-in-out;
  }

  .input_box_container {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 60rpx;
  }

  .input_box {
    display: flex;
    align-items: center;
    color: #d8d7d7;
    border: 1px solid #F0D9BD;
    background-color: #F0D9BD;
    padding: 20rpx 30rpx;
    border-radius: 100rpx;
    gap: 20rpx;
  }

  .input_box_item_title {
    white-space: nowrap;
  }

  .step_5_remark {
    width: 100%;

  }
}

.step_6_container {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 0 10%;
  min-height: calc(100dvh - 120rpx);

  .step_6_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 200rpx;
  }

  .step_6_content {
    margin-top: 50rpx;
    color: #d8d7d7;

    font-size: 32rpx;
    display: flex;
    flex-direction: column;

    justify-content: center;
    gap: 20rpx;
  }

  .step_6_icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20rpx;
    margin-top: 100rpx;
    padding: 0 10%;
    animation: moveFromBottom 2s ease-in-out;
  }

  .step_6_icon img {
    width: 30%;
  }
}


.music_container {
  position: fixed;
  bottom: 20rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;


  img {
    width: 100%;
    height: 100%;
  }
}

.rotation {
  animation: rotation 3s linear infinite;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}



.popup_container {
  padding: 20rpx;
  border-radius: 100px;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  padding-bottom: 100rpx;

  .time_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2%;

  }

  .time_item {
    width: 25%;
    padding: 40rpx 20rpx;
    margin-bottom: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #BD9D6E;
  }

  .disabled {
    background: #F2F3F9;
    color: #B7B9B7;
    border: 1px solid #F2F3F9;
  }

  .selected {
    background: #BD9D6E;
    color: #fff;
  }
}

.toast_container {
  width: 350rpx;
  height: 350rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;

  .toast_btn {
    width: 50%;
    background-color: #BD9D6E;
    padding: 20rpx 0;
    border-radius: 100px;
    color: #fff;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
    text-align: center;
  }
}
</style>
